<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="./lib/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- CDN   对于制作原型或学习，可以这样使用最新版本-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
</head>
<body>
<!--声明变量 message-->
<div id="app">
    {{ msg }}
</div>

<script type="text/javascript">
    // 声明Vue的对象app，对象的入参el代表元素，id选择器绑定app对象，data中注册所声明的变量并且赋值
    // 该对象被加入到一个 Vue 实例中
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "hi vue",
        },
        // 在实例初始化之后，数据观测（data observer）和 event/watcher 事件配置前被调用
        beforeCreate:function () {
            console.log('beforeCreate');
        },
        // 在实例创建完成后被立即调用,实例已完成以下配置：数据观测、属性和方法的运算和和 event/watcher 事件的回调，但挂载阶段未开始，$el属性目前不可见
        created:function () {
            console.log('created');
        },
        // 在挂载开始之前被调用，相关的渲染函数首次被调用
        beforeMount:function () {
            console.log('beforeMount');
        },
        // el 被新创建的 vm.$el 替换，挂载成功
        mounted:function () {
            console.log('mounted');
        },
        // 在数据更新时调用
        beforeUpdate:function () {
            console.log('beforeUpdate');
        },

        // 组件DOM已经更新，组件更新完毕
        updated:function () {
            console.log('updated');
        }
    });
    // 3秒之后将msg文本从 hi vue 修改为 changed ............
    setTimeout(function () {
        vm.msg = "changed ............";
    },3000);

</script>
</body>
</html>
